<template>
  <BaseLayoutTree :loading="loading" treeTitle="组织机构" title="组织管理" @query="init" @reset="reset">
    <template #button>
      <el-button v-buttonBlur type="primary" @click="addOrg">新增</el-button>
    </template>
    <template #query>
      <el-form
      :model="queryForm"
      >
        <el-form-item label="组织名称">
          <el-input clearable v-model="queryForm.orgName" placeholder="请输入组织名称" />
        </el-form-item>
      </el-form>
    </template>
    <template #tree>
      <el-tree
          :expand-on-click-node="false"
          default-expand-all
          node-key="orgId"
          @node-click="nodeClickHandler"
          :props="{
         label: 'orgName',
         children: 'children'
       }"
          :data="orgTree"
      >
        <template #default="{ node, data }">
          <BaseIcon v-if="data.type==1" icon="bjx-gongsi" class="mr-1.5"></BaseIcon>
          <BaseIcon v-else icon="bjx-bumenguanli" class="mr-1.5"></BaseIcon>
          <span class="custom-tree-node">
            <span>{{ node.label }}</span>
          </span>
        </template>
      </el-tree>
    </template>
    <template #table>
      <AddOrUpdateOrg @loadTree="orgTreeLoad" ref="addOrUpdateOrgRef"></AddOrUpdateOrg>
      <el-table
          ref="singleTableRef"
          :data="tableData"
          highlight-current-row
          style="width: 100%"
      >
        <el-table-column header-align="center" align="center" label="序号" type="index" width="55"/>
        <el-table-column header-align="left" align="left"  prop="orgName" label="组织名称" />
        <el-table-column header-align="left" align="left"  prop="comName"  label="所属公司" />
        <el-table-column header-align="center" align="center" prop="type" label="组织类型" width="80">
          <template #default="scope">
            <BaseTag :value="scope.row.type" :dict="orgTypeOptions"></BaseTag>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" prop="enabled" label="是否启用" width="80">
          <template #default="scope">
            <BaseTag :value="scope.row.enabled" :dict="enableOptions"></BaseTag>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center"  prop="createUserName" width="120" label="创建用户" />
        <el-table-column label="操作" width="180" align="center" header-align="center">
          <template #default="scope">
            <el-button link  type="primary"  @click="editOrg( scope.row)">修改</el-button>
            <el-button link  type="danger" @click="delOrg( scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </BaseLayoutTree>
</template>

<script setup lang="ts" name="org">

import AddOrUpdateOrg from "/@/views/system/org/AddOrUpdateOrg.vue";
import {onMounted, reactive, ref} from "vue";
import {deleteOrgByOrgId, listOrg, listTreeOrg, selectOrgByOrgId} from "/@/api/system/OrgApi";
import {OrgModel, OrgQueryModel} from "/@/api/system/model/OrgModel";
import {DictDataModel} from "/@/api/system/model/DictModel";
import {useDictStore} from "/@/store/modules/dict";
import {messageBox} from "/@/utils/BjxUtils";
import {deleteDictTypeByDictTypeId} from "/@/api/system/DictApi";

const queryForm = reactive<OrgQueryModel>({
  orgName: ''
})
const orgTypeOptions = ref<DictDataModel[]>([])
const enableOptions = ref<DictDataModel[]>([])
const loading = ref(false)
const tableData = ref<OrgModel[]>([])
const addOrUpdateOrgRef = ref()
const orgTree = ref<OrgModel[]>([])
const init = async () => {
  loading.value = true
  let res = await listOrg(queryForm)
  tableData.value = res
  loading.value = false
}
const reset = () => {
  queryForm.orgName = ''
  init()
}
/**
 * 加载组织机构
 */
const orgTreeLoad = async () => {
  let res = await listTreeOrg({orgId: '0', isCompany: false})
  orgTree.value = res
  if(res && res.length > 0){
    queryForm.pid = res[0].orgId
    init()
  }
}
const addOrg = () => {
  addOrUpdateOrgRef.value.init("新增组织机构")
}
/**
 * 节点单击事件
 */
const nodeClickHandler = (data: OrgModel) => {
  queryForm.pid = data.orgId
  init()
}
/**
 * 修改组织机构
 */
const editOrg = async (row: OrgModel) => {
  loading.value = true
  let res = await selectOrgByOrgId(row.orgId)
  loading.value = false
  addOrUpdateOrgRef.value.init("修改组织机构",res)
}
/**
 * 删除组织机构
 */
const delOrg = (row: OrgModel) => {
  messageBox("您确定要删除这个组织机构吗?",async ()=>{
    loading.value = true
    await deleteOrgByOrgId(row.orgId,()=>{
      loading.value = false
    })
    init()
    orgTreeLoad()
  })
}
onMounted(async () => {
  let dictStore = useDictStore()
  enableOptions.value = await dictStore.getDict('enable_dict')
  orgTypeOptions.value = await dictStore.getDict('org_type')
  orgTreeLoad()
})
</script>

<style scoped>

</style>